<template>
	<!-- 工具栏 -->
	<div
		class="ly-tools-bar w-full h-10 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
		<!-- 左侧 -->
		<div class="left flex items-center">
			<div
				title="折叠侧边栏"
				@click="handleCollapse"
				class="item h-7 cursor-pointer rounded-md overflow-hidden">
				<div
					class="w-full px-2 h-full flex items-center justify-center duration-300 text-blue-500 hover:bg-blue-500 hover:text-white">
					<i class="bi bi-text-indent-right text-lg" v-show="!sidebarIsFold"></i>
					<i class="bi bi-text-indent-left text-lg" v-show="sidebarIsFold"></i>
				</div>
			</div>
			<slot name="left"> </slot>
		</div>
		<!-- 右侧 -->
		<div class="right flex items-center">
			<div
				title="切换主题"
				@click="switchTheme"
				class="item h-7 cursor-pointer rounded-md overflow-hidden">
				<div
					class="w-full px-2 h-full flex items-center justify-center duration-300 text-blue-500 hover:bg-blue-500 hover:text-white">
					<i class="bi bi-moon-fill text-sm mr-1"></i>
					<!-- <i class="bi bi-sun-fill text-sm"></i> -->
					<span class="text-xs">切换主题</span>
				</div>
			</div>
			<div title="云端同步" class="item h-7 cursor-pointer rounded-md overflow-hidden">
				<div
					@click="router.push('/cloudSync')"
					class="w-full px-2 h-full flex items-center justify-center duration-300 text-blue-500 hover:bg-blue-500 hover:text-white">
					<i class="bi bi-cloud-arrow-up-fill text-base mr-1"></i>
					<span class="text-xs">云端同步</span>
				</div>
			</div>
			<slot name="right"> </slot>
		</div>
		<ly-drawer v-model="drawerVisible">
			<ly-sidebar />
		</ly-drawer>
	</div>
</template>

<script lang="ts">
import { useThemeStore } from '@/stores/themeStore';
import { useScreenStore } from '@/stores/screenStore';
import LyDrawer from '@/components/LyDrawer/index.vue';
import { useSidebarStore } from '@/stores/sidebarStore';
import LySidebar from '@/components/LySidebar/index.vue';

export default defineComponent({
	name: 'LyToolsBar',
	components: { LyDrawer, LySidebar },
	setup() {
		const router = useRouter();
		const themeStore = useThemeStore();
		const screenStore = useScreenStore();
		const sidebarStore = useSidebarStore();

		// 切换主题
		const switchTheme = (): void => {
			themeStore.toggleTheme();
		};

		// 抽屉侧边栏显示状态
		const drawerVisible = ref<boolean>(false);

		// 折叠状态栏
		const handleCollapse = (): void => {
			if (screenStore.screenSize === 'sm' || screenStore.screenSize === 'xs') {
				drawerVisible.value = true;
				return;
			}
			sidebarStore.isFold = !sidebarStore.isFold;
		};

		const sidebarIsFold = computed(() => {
			if (sidebarStore.isFold) {
				return true;
			}
			return screenStore.screenSize === 'xs' || screenStore.screenSize === 'sm';
		});

		return {
			router,
			sidebarIsFold,
			drawerVisible,
			switchTheme,
			handleCollapse,
		};
	},
});
</script>

<style lang="scss" scoped>
.ly-tools-bar {
	overflow-x: scroll;

	&::-webkit-scrollbar {
		width: 5px;
		height: 5px;
	}

	&::-webkit-scrollbar-thumb {
		cursor: pointer;
		border-radius: 5px;
	}

	&:hover {
		&::-webkit-scrollbar-thumb {
			background-color: #838d9c83;
		}
	}
}

.item {
	margin: 0 5px;

	&:hover {
		box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
	}
}
</style>
